<template>
	<div class="login-container flex">
		<vue-particles id="tsparticles" :options="particlesOption" />
		<div class="login-content flex">
			<div class="login-content-warp flex-margin">
				<div class="login-content-warp-aside">
					<span class="title">{{ getThemeConfig.globalViceTitle }}</span>
					<span class="text-msg">{{ getThemeConfig.globalViceTitleMsg }}</span>
				</div>
				<div class="login-content-warp-mian">
					<div class="login-content-warp-main-title">{{ getThemeConfig.globalTitle }} 欢迎您！</div>
					<div class="login-content-warp-main-form">
						<Account />
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts" name="loginIndex">
import { defineAsyncComponent, onMounted, computed } from 'vue';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import { NextLoading } from '/@/utils/loading';

// 引入组件
const Account = defineAsyncComponent(() => import('/@/views/login/component/account.vue'));

// 定义变量内容
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);

// 获取布局配置信息
const getThemeConfig = computed(() => {
	return themeConfig.value;
});

// 背景配置
const particlesOption = {
	"fps_limit": 60,
	"interactivity": {
		"detectsOn": "canvas",
		"events": {
			"onClick": {
				"enable": true,
				"mode": "push"
			},
			"onHover": {
				"enable": true,
				"mode": "repulse"
			},
			"resize": true
		},
		"modes": {
			"push": {
				"particles_nb": 4
			},
			"repulse": {
				"distance": 200,
				"duration": 0.4
			}
		}
	},
	"particles": {
		"color": {
			"value": "#ffffff"
		},
		"links": {
			"color": "#ffffff",
			"distance": 150,
			"enable": true,
			"opacity": 0.4,
			"width": 1
		},
		"move": {
			"bounce": false,
			"direction": "none",
			"enable": true,
			"outMode": "out",
			"random": false,
			"speed": 0.5,
			"straight": false
		},
		"number": {
			"density": {
				"enable": true,
				"area": 800
			},
			"value": 80
		},
		"opacity": {
			"value": 0.5
		},
		"shape": {
			"type": "circle"
		},
		"size": {
			"random": true,
			"value": 5
		}
	},
	"detectRetina": true
};

// 页面加载时
onMounted(() => {
	NextLoading.done();
});
</script>

<style scoped lang="scss">
.login-container {
	height: 100%;
	background-color: #1626a1;
	background-image: linear-gradient(-180deg, #1a1454 0%, #0e81a5 100%);
	display: flex;
	justify-content: center;
	align-items: center;

	.login-content {
		width: 800px;

		.login-content-warp {
			width: 100%;
			height: 400px;
			position: relative;
			overflow: hidden;
			display: flex;
			border-radius: var(--el-card-border-radius);
			border: 1px solid var(--el-card-border-color);
			background-color: var(--el-color-white);
			box-shadow: var(--el-box-shadow-light);
			overflow: hidden;
			border-radius: 20px;

			.login-content-warp-aside {
				width: 360px;
				height: 100%;
				background: url('/src/assets/admin_warp.png');
				background-size: cover;
				display: flex;
				flex-direction: column;
				justify-content: left;
				align-items: center;
				padding: 20px;

				.title {
					font-size: 28px;
					color: white;
					margin-bottom: 5px;
				}

				.text-msg {
					font-size: 22px;
					color: white;
				}
			}

			.login-content-warp-mian {
				display: flex;
				flex-direction: column;
				height: 100%;
				width: 440px;

				.login-content-warp-main-title {
					height: 110px;
					line-height: 130px;
					font-size: 27px;
					text-align: center;
					letter-spacing: 1px;
					animation-delay: 0.3s;
					color: var(--el-text-color-primary);
				}

				.login-content-warp-main-form {
					flex: 1;
					padding: 0 50px 50px;
					justify-content: left;
					align-items: flex-start;
				}
			}
		}
	}
}

@media (max-width: 800px) {
	#tsparticles {
		display: none;
	}

	.login-container {
		.login-content {
			width: 80%;

			.login-content-warp {
				width: 100%;

				.login-content-warp-aside {
					display: none;
				}

				.login-content-warp-mian {
					width: 100%;
				}
			}
		}
	}

}
</style>
